<template>
  <view class="artworks-list-item-container">
    <view
      v-for="(item, index) in artworksList"
      :key="item.id"
      class="artworks-item"
      @click="handleArtworks(item, index)">
      <u-image
        width="332rpx"
        height="200rpx"
        :lazy-load="true"
        :fade="false"
        :border-radius="0"
        :show-menu-by-longpress="false"
        :src="item.type === 8 ? item.video_cover_url : (item.wx_cover_url || item.cover_url + '?imageMogr2/auto-orient/thumbnail/!30p/blur/1x0/quality/80')"
        class="image">
        <u-loading slot="loading" color="#56d39d" size="36"></u-loading>
      </u-image>
      <!-- 状态显示 -->
      <view class="show-status-container">
        <view v-if="item.audit_status === 'review'" class="wait">
          <text>审核中</text>
          <u-icon name="clock" size="28"></u-icon>
        </view>
        <view v-else-if="item.audit_status === 'reject'" class="reject">
          <text>违规</text>
          <!-- <u-icon name="error-circle" size="28"></u-icon> -->
        </view>
        <view v-else-if="item.audit_status === 'success'">
          <u-icon name="download" size="28"></u-icon>
          <text style="padding-left: 6rpx">{{ item.download_num }}</text>
        </view>
      </view>
      <!-- 状态显示 -->
      <!-- 选择操作 -->
      <!-- <image
        v-if="isBatch && item.audit_status !== 'success'"
        src="@/static/icon/nochecked.png"
        mode="scaleToFill"
        class="checkbox"
        @click.native="handleCheckBox(item, index)"
      /> -->
      <image
        v-if="isBatch && !item.checked"
        src="@/static/icon/unchecked.png"
        mode="scaleToFill"
        class="checkbox"
      />
      <image
        v-else-if="isBatch && item.checked"
        src="@/static/icon/checked.png"
        mode="scaleToFill"
        class="checkbox"
      />
      <!-- 置顶 -->
      <view v-if="item.is_top === '1' && !isAlbum" class="is_top">
        <text>置顶</text>
      </view>
      <!-- 置顶 -->
      <view v-if="item.album_top === '1' && isAlbum" class="is_top">
        <text>置顶</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    artworksList: {
      type: Array,
      default: () => {
        return []
      }
    },
    isBatch: {
      type: Boolean,
      default: false
    },
    isAlbum: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      name: '列表'
    }
  },
  methods: {
    handleArtworks(rowDta, index) {
      if (!this.isBatch) {
        this.$emit('handleArtworks', rowDta);
        return;
      }
      this.$emit('handleCheckBox', index);
    },
  }
}
</script>

<style lang="scss">
  .artworks-list-item-container{
    display: flex;
    flex-wrap: wrap;

    .artworks-item{
      width: 332rpx;
      height: 200rpx;
      margin-bottom: 24rpx;
      position: relative;
      border-radius: 8rpx;
      overflow: hidden;
      border: 1rpx solid #eaeaea;
      overflow: hidden;

      .show-status-container{
        background: rgba($color: #000000, $alpha: .6);
        color: #fff;
        width: 100%;
        // height: 44rpx;
        line-height: 44rpx;
        z-index: 1;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: flex;
        padding-left: 10rpx;
        padding-right: 10rpx;
        font-size: 24rpx;

        .wait{
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #f29100;
        }

        .reject{
          width: 100%;
          display: flex;
          justify-content: space-between;
          color: #fa3534;
          font-size: 20rpx;
        }
      }
      .checkbox{
        width: 50rpx;
        height: 50rpx;
        position: absolute;
        right: 10rpx;
        top: 10rpx;
      }

      .is_top{
        text-align: center;
        width: 70rpx;
        height: 36rpx;
        line-height: 36rpx;
        position: absolute;
        font-size: 24rpx;
        left: 0;
        top: 0;
        color: #fff;
        border-radius: 6rpx;
        background-color: $uni-color-primary2;
      }
    }

    .artworks-item:nth-child(2n - 1) {
      margin-right: 20rpx;
    }
  }
</style>
